<template>
  <div class="btnGroup-container">
    <span v-if="!isStart" v-action="'category@update'" class="column-btn edit-btn" @click="editClick"><img src="../../../../assets/common/edit@2x.png" alt=""></span>
    <span v-if="!isStart" v-action="'category@delete'" class="column-btn delete-btn margin-left" @click="deleteClick"><img src="../../../../assets/common/delete@2x.png" alt=""></span>
    <span v-if="!isStart" v-action="'category@verify'" class="column-btn delete-btn margin-left" @click="startClick"><img src="../../../../assets/common/start2@2x.png" alt=""></span>
    <span v-if="isStart" v-action="'category@verify'" class="column-btn delete-btn margin-left" @click="stopClick"><img src="../../../../assets/common/stop(1)@2x.png" alt=""></span>
  </div>
</template>

<script>
import { action } from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'BtnGroup',
  directives: {
    action
  },
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    },
    isStart: {
      // 启用
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    // 修改
    editClick() {
      this.$emit('editClick', this.row)
    },
    // 删除
    deleteClick() {
      this.$emit('deleteClick', this.row)
    },
    // 启用
    startClick() {
      this.$emit('startClick', this.row)
    },
    // 禁用
    stopClick() {
      this.$emit('stopClick', this.row)
    }
  }
}
</script>

<style scoped>
.margin-left {
  margin-left: 15px;
}
.column-btn {
  font-size: 14px;
  cursor: pointer;
}
.edit-btn {
  color: #39a0ff;
}
.delete-btn {
  color: #ff4444;
}
img {
  width: 16px;
}
</style>

